<template>
  <div style="background: #fff">
    <div style="margin-bottom: 15px; border-bottom: 1px solid #f0f0f0">
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane
            v-for="item of tabList"
            :key="item.key"
            :tab="item.text"
        ></a-tab-pane>
      </a-tabs>
    </div>

    <a-form
        :model="formState"
        :rules="rules"
        ref="formRef"
        @finish="onSubmit"
        @finishFailed="finishFailed"
        layout="vertical"
    >
      <a-row :gutter="12">
        <a-col :span="24">
          <a-card
              title="基本信息"
              style="margin-bottom: 20px"
              v-if="activeTab === 'basic'"
          >
            <template #extra
            ><a
                @click="btnNews"
                v-if="$store.getters.orgInfo.village_type != 'villageAged'"
            >同步工商信息</a
            ></template
            >
            <a-row :gutter="16">
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item name="name">
                  <template #label>
                    <a-space size="large">
                      <span>{{ type == 1 ? "供应商" : "业户" }}名称</span>
                      <a-checkbox
                          v-model:checked="is_personal"
                          v-if="
                          $store.getters.orgInfo.village_type != 'villageAged'
                        "
                      >
                        个人
                      </a-checkbox>
                    </a-space>
                  </template>

                  <div class="flex justify-between align-center">
                    <a-input
                        class="flex-1"
                        v-if="is_personal"
                        v-model:value="formState.name"
                        placeholder="请填写..."
                    >
                    </a-input>
                    <a-auto-complete
                        v-else
                        class="flex-1"
                        v-model:value="formState.name"
                        :options="optionsSeach"
                        placeholder="请填写..."
                        @search="onSearch"
                        @change="onchange"
                    >
                    </a-auto-complete>
                    <div
                        v-if="id==0"
                        style="width:53px;padding: 0 11px;height:32px;line-height: 32px;text-align: center;color: #2681f3; border: 1px solid #ccc;margin-left: -1px;cursor: pointer;"
                        v-permission="['clueManagement', 'curd', 'list']"
                        @click="importCustom">引入
                    </div>
                  </div>
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8" v-if="!!id">
                <a-form-item name="contact_id">
                  <template #label>
                    <span>默认联系人</span>
                    <text-tip
                        tips="此处必须选择法人，电子合同等场景需要使用此联系人信息自动注册签署身份。请输入全名或手机号搜索，不支持模糊搜索。"
                    ></text-tip>
                  </template>
                  <template #help>
                    <span class="text-warning" v-if="showContactTip">
                      选择的人员名称与法定代表人不一致，此处建议选择法人
                    </span>
                  </template>
                  <a-select
                      v-model:value="formState.contact_id"
                      :options="houseHoldList.list1"
                      placeholder="全名或手机号搜索"
                      :filter-option="false"
                      show-search
                      allowClear
                      @search="(value) => handleContactsChange(1, value)"
                      @select="(val, opt) => handleContractSelect(opt)"
                  >
                    <template #dropdownRender="{ menuNode: menu }">
                      <v-nodes :vnodes="menu"/>
                      <a-divider style="margin: 4px 0"/>
                      <div
                          style="
                          padding: 4px 8px;
                          cursor: pointer;
                          text-align: center;
                          color: #2681f3;
                        "
                          @mousedown="(e) => e.preventDefault()"
                          @click="addContact"
                      >
                        添加
                      </div>
                    </template>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8" v-if="!!id">
                <a-form-item name="contact_notice_id">
                  <template #label>
                    <a-space>
                      <span>账单联系人</span>
                      <text-tip
                          tips="用于发送该业户账单缴费提醒的联系人，若不选择默认使用默认联系人"
                      ></text-tip>
                    </a-space>
                  </template>
                  <a-select
                      v-model:value="formState.contact_notice_id"
                      :options="houseHoldList.list2"
                      placeholder="请选择，搜索请输入全名或手机号"
                      :filter-option="false"
                      show-search
                      allowClear
                      @search="(value) => handleContactsChange(2, value)"
                  >
                    <template #dropdownRender="{ menuNode: menu }">
                      <v-nodes :vnodes="menu"/>
                      <a-divider style="margin: 4px 0"/>
                      <div
                          style="
                          padding: 4px 8px;
                          cursor: pointer;
                          text-align: center;
                          color: #2681f3;
                        "
                          @mousedown="(e) => e.preventDefault()"
                          @click="addContact"
                      >
                        添加
                      </div>
                    </template>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8" v-if="!!id">
                <a-form-item name="approval_contact_id">
                  <template #label>
                    <span>审批联系人</span>
                    <text-tip
                        tips="在业户审批中如果处理人为业户时，优先取审批联系人，如果未设置则取默认联系人。"
                    ></text-tip>
                  </template>
                  <a-select
                      v-model:value="formState.approval_contact_id"
                      :options="houseHoldList.list1"
                      placeholder="全名或手机号搜索"
                      :filter-option="false"
                      show-search
                      allowClear
                      @search="(value) => handleContactsChange(1, value)"
                      @select="(val, opt) => handleContractSelect(opt)"
                  >
                    <template #dropdownRender="{ menuNode: menu }">
                      <v-nodes :vnodes="menu"/>
                      <a-divider style="margin: 4px 0"/>
                      <div
                          style="
                          padding: 4px 8px;
                          cursor: pointer;
                          text-align: center;
                          color: #2681f3;
                        "
                          @mousedown="(e) => e.preventDefault()"
                          @click="addContact"
                      >
                        添加
                      </div>
                    </template>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8" v-if="!!id">
                <a-form-item label="合同签署人" name="contact_sign_id">
                  <a-select
                      v-model:value="formState.contact_sign_id"
                      :options="houseHoldList.list3"
                      placeholder="请选择，搜索请输入全名或手机号"
                      show-search
                      :filter-option="false"
                      allowClear
                      @search="(value) => handleContactsChange(3, value)"
                  >
                    <template #dropdownRender="{ menuNode: menu }">
                      <v-nodes :vnodes="menu"/>
                      <a-divider style="margin: 4px 0"/>
                      <div
                          style="
                          padding: 4px 8px;
                          cursor: pointer;
                          text-align: center;
                          color: #2681f3;
                        "
                          @mousedown="(e) => e.preventDefault()"
                          @click="addContact"
                      >
                        添加
                      </div>
                    </template>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="行业分类" name="industry">
                  <a-select
                      v-model:value="formState.industry"
                      placeholder="请选择..."
                      :options="options"
                  >
                    <template #dropdownRender="{ menuNode: menu }">
                      <v-nodes :vnodes="menu"/>
                      <a-divider style="margin: 4px 0"/>

                      <!--@mousedown="e => e.preventDefault()"  -->
                      <div
                          style="
                          padding: 4px 8px;
                          cursor: pointer;
                          color: #1890ff;
                          text-align: center;
                        "
                          @mousedown="(e) => e.preventDefault()"
                          @click="addTag('industry')"
                      >
                        添加
                      </div>
                    </template>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="标签" name="tag_info">
                  <a-select
                      v-model:value="formState.tag_info"
                      :options="tagOptions"
                      mode="multiple"
                      placeholder="请选择..."
                  >
                    <template #dropdownRender="{ menuNode: menu }">
                      <v-nodes :vnodes="menu"/>
                      <a-divider style="margin: 4px 0"/>

                      <!--@mousedown="e => e.preventDefault()"  -->
                      <div
                          style="
                          padding: 4px 8px;
                          cursor: pointer;
                          color: #1890ff;
                          text-align: center;
                        "
                          @mousedown="(e) => e.preventDefault()"
                          @click="addTag('owner')"
                      >
                        添加
                      </div>
                    </template>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="财务客商编码" name="tenant_no">
                  <a-input
                      v-model:value="formState.tenant_no"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="客商类型" name="type">
                  <a-select
                      v-model:value="formState.type"
                      placeholder="请选择..."
                  >
                    <a-select-option :value="0">客户</a-select-option>
                    <a-select-option :value="1">供应商</a-select-option>
                    <a-select-option :value="2">客户&供应商</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8" v-if="!is_personal &&(formState.type == 0 || formState.type == 2)">
                <a-form-item label="选择品牌">
                  <a-input v-model:value="brandData.brand_name" readonly placeholder="请选择品牌">
                    <template #addonAfter>
                      <a-button type="text" @click="selectBrandClick" size="small"
                                style="height: 30px;">
                        <diff-filled/>
                      </a-button>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col v-if="isDaShi" :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="绑定达实部门" name="third_id">
                  <a-select
                      v-model:value="formState.third_id"
                      show-search
                      :filter-option="filterOption"
                      placeholder="绑定达实部门"
                      @popupScroll="handlePopupScroll"
                      :options="selectData"
                  >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8"
                     v-permission="['clueManagement', 'auth', 'manager']" @click.prevent>
                <a-form-item name="team_user_id">
                  <template #label>
                    <span style="margin-right: 5px">招商跟进人</span>
                    <a-tooltip>
                      <template #title
                      >仅可选择招商人员，其他人员将置灰不能选择
                      </template
                      >
                      <span><QuestionCircleOutlined/></span>
                    </a-tooltip>
                  </template>
                  <a-select
                      v-model:value="formState.team_user_id"
                      placeholder="选择招商跟进人"
                      :open="false"
                      @click="chooseBusinessFollow"
                      :options="businessOptions"
                  >
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>

          <!-- 创建业户时，能同步创建业户员工，绑定联系人 -->
          <a-card
              title="默认联系人"
              style="margin-bottom: 20px"
              v-if="!id && activeTab === 'basic'"
          >
            <a-row :gutter="16">
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="姓名：" :name="['contact_data', 'name']">
                  <a-input
                      v-model:value="formState.contact_data.name"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="手机号码："
                    :name="['contact_data', 'phone']"
                >
                  <a-input
                      v-model:value="formState.contact_data.phone"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="身份：" :name="['contact_data', 'type']">
                  <a-select
                      v-model:value="formState.contact_data.type"
                      :options="typeList"
                      placeholder="请选择"
                  ></a-select>
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="证件类型："
                    :name="['contact_data', 'idcard_type']"
                >
                  <a-select
                      v-model:value="formState.contact_data.idcard_type"
                      :options="idTypeList"
                      placeholder="请选择"
                  ></a-select>
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item :name="['contact_data', 'idcard']">
                  <template #label>
                    <a-row justify="space-between" style="width: 100%">
                      <a-col>证件号码：</a-col>
                      <a-col>
                        <a-button
                            v-if="readerConnected"
                            type="link"
                            style="
                            padding: 0;
                            margin: 0;
                            border: none;
                            height: 22px;
                            line-height: 22px;
                          "
                            @click="showIDCardReader"
                        >读取证件
                        </a-button
                        >
                        <a-tooltip v-else>
                          <template #title
                          >请先连接上身份证阅读器，目前支持《精伦IDR210居民身份阅读器》。
                          </template
                          >
                          <a-button
                              type="link"
                              style="
                              padding: 0;
                              margin: 0;
                              border: none;
                              height: 22px;
                              line-height: 22px;
                            "
                              @click="showIDCardReader"
                              :disabled="!readerConnected"
                          >读取证件
                          </a-button
                          >
                        </a-tooltip>
                      </a-col>
                    </a-row>
                  </template>
                  <a-input
                      v-model:value="formState.contact_data.idcard"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="邮箱：" :name="['contact_data', 'email']">
                  <a-input
                      v-model:value="formState.contact_data.email"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card
              title="账户信息"
              style="margin-bottom: 20px"
              v-if="personalType && activeTab === 'basic'"
          >
            <a-row :gutter="16">
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="开户银行："
                    :name="['invoice_info', 'bank']"
                >
                  <a-input
                      v-model:value="formState.invoice_info.bank"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="账号：" :name="['invoice_info', 'account']">
                  <a-input
                      v-model:value="formState.invoice_info.account"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="电话：" :name="['invoice_info', 'tel']">
                  <a-input
                      v-model:value="formState.invoice_info.tel"
                      placeholder="请填写..."
                      type="tel"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="纳税人识别号："
                    :name="['invoice_info', 'taxpayerIdNumber']"
                >
                  <a-input
                      v-model:value="formState.invoice_info.taxpayerIdNumber"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="默认发票类型："
                    :name="['invoice_info', 'invoice_type']"
                >
                  <a-select
                      v-model:value="formState.invoice_info.invoice_type"
                      :options="receipt"
                      placeholder="请选择"
                  ></a-select>
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="开票地址："
                    :name="['invoice_info', 'address']"
                >
                  <a-input
                      v-model:value="formState.invoice_info.address"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item :name="['invoice_info', 'template_id']">
                  <template #label>
                    <a-space>
                      <span>默认发票模板</span>
                      <text-tip
                          tips="当默认的发票模板不支持该业户所在的楼宇时将无法生效"
                      ></text-tip>
                    </a-space>
                  </template>
                  <a-select
                      v-model:value="formState.invoice_info.template_id"
                      :options="templateList"
                      placeholder="请选择"
                  ></a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
          <a-card
              title="工商信息"
              style="margin-bottom: 20px"
              v-if="personalType && activeTab === 'basic'"
          >
            <a-row :gutter="16">
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="统一社会信用代码："
                    :name="['business_info', 'unifiedSocialCreditCode']"
                >
                  <a-input
                      v-model:value="
                      formState.business_info.unifiedSocialCreditCode
                    "
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="纳税人识别号："
                    :name="['business_info', 'taxpayerIdNumber']"
                >
                  <a-input
                      v-model:value="formState.business_info.taxpayerIdNumber"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="注册号："
                    :name="['business_info', 'registrationNumber']"
                >
                  <a-input
                      v-model:value="formState.business_info.registrationNumber"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="组织机构代码："
                    :name="['business_info', 'organizationCode']"
                >
                  <a-input
                      v-model:value="formState.business_info.organizationCode"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="法定代表人："
                    :name="['business_info', 'legalPerson']"
                >
                  <a-input
                      v-model:value="formState.business_info.legalPerson"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="邮箱：" name="email">
                  <a-input
                      v-model:value="formState.email"
                      placeholder="请填写..."
                      type="email"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="国籍："
                    :name="['business_info', 'birthCountry']"
                >
                  <!-- :name="['business_info', 'birthCountry']" -->
                  <a-input
                      v-model:value="formState.business_info.birthCountry"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="注册资本（万）："
                    :name="['business_info', 'registeredCapital']"
                >
                  <a-input
                      v-model:value="formState.business_info.registeredCapital"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="经营状态："
                    :name="['business_info', 'operatingState']"
                >
                  <a-input
                      v-model:value="formState.business_info.operatingState"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="登记机关："
                    :name="['business_info', 'registrationAuthority']"
                >
                  <a-input
                      v-model:value="
                      formState.business_info.registrationAuthority
                    "
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="公司类型："
                    :name="['business_info', 'companyType']"
                >
                  <a-input
                      v-model:value="formState.business_info.companyType"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="人员规模："
                    :name="['business_info', 'staffSize']"
                >
                  <a-input
                      v-model:value="formState.business_info.staffSize"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="英文名："
                    :name="['business_info', 'englishName']"
                >
                  <!--   :name="['business_info', 'englishName']" -->
                  <a-input
                      v-model:value="formState.business_info.englishName"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="成立日期："
                    :name="['business_info', 'business_info_founding_time']"
                >
                  <a-date-picker
                      style="width: 100%"
                      v-model:value="
                      formState.business_info.business_info_founding_time
                    "
                      valueFormat="YYYY-MM-DD"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="核准日期："
                    :name="['business_info', 'approvalTime']"
                >
                  <a-date-picker
                      style="width: 100%"
                      v-model:value="formState.business_info.approvalTime"
                      valueFormat="YYYY-MM-DD"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    :name="['business_info', 'business_info_business_term']"
                >
                  <template #label>
                    <a-row style="width: 100%" justify="space-between">
                      <a-col>营业期限：</a-col>
                      <a-col>
                        <a @click="permanentTimeClick">永久</a>
                      </a-col>
                    </a-row>
                  </template>
                  <a-date-picker
                      style="width: 100%"
                      v-model:value="
                      formState.business_info.business_info_business_term
                    "
                      valueFormat="YYYY-MM-DD"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="所属地区："
                    :name="['business_info', 'district']"
                >
                  <a-input
                      v-model:value="formState.business_info.district"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="注册地址："
                    :name="['business_info', 'address']"
                >
                  <a-input
                      v-model:value="formState.business_info.address"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="实缴资本："
                    :name="['business_info', 'actualCapital']"
                >
                  <a-input
                      v-model:value="formState.business_info.actualCapital"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="国税编号："
                    :name="['business_info', 'nationalTaxNumber']"
                >
                  <a-input
                      v-model:value="formState.business_info.nationalTaxNumber"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item
                    label="地税编号："
                    :name="['business_info', 'localTaxNumber']"
                >
                  <a-input
                      v-model:value="formState.business_info.localTaxNumber"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 16">
                <a-form-item
                    label="所属行业："
                    :name="['business_info', 'industry']"
                >
                  <a-input
                      v-model:value="formState.business_info.industry"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item
                    label="经营范围："
                    :name="['business_info', 'businessScope']"
                >
                  <a-textarea
                      v-model:value="formState.business_info.businessScope"
                      placeholder="请填写..."
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col
            :span="$store.getters.isMobile ? 24 : 8"
            v-if="activeTab === 'basic'"
        >
          <a-form-item name="is_archive" v-if="!!id">
            <template #label>
              <span style="margin-right: 5px">是否归档</span>
              <a-tooltip>
                <template #title
                >控制是否在列表数据中显示，选择是则不显示
                </template
                >
                <span><QuestionCircleOutlined/></span>
              </a-tooltip>
            </template>
            <div class="status-box">
              <div
                  v-for="(item, index) of statusList"
                  :key="index"
                  class="status-item"
                  :class="formState.is_archive === item.value ? 'active' : ''"
                  @click="formState.is_archive = item.value"
              >
                {{ item.label }}
              </div>
            </div>
          </a-form-item>
        </a-col>

        <!--    企业相关    -->
        <a-col :span="24" v-show="activeTab === 'other'">
          <a-card title="企业信息" style="margin-bottom: 20px">
            <a-row :gutter="16">
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item name="logo">
                  <template #label>
                    <span style="margin-right: 5px">企业Logo</span>
                    <a-tooltip>
                      <template #title>建议上传白底图片，用于展示</template>
                      <span><QuestionCircleOutlined/></span>
                    </a-tooltip>
                  </template>
                  <a-upload
                      :action="$utils.imgAction"
                      :headers="{ 'org-token': $store.getters.token }"
                      :multiple="false"
                      v-model:file-list="fileList"
                      list-type="picture-card"
                      @change="handleUploadChange"
                      name="image"
                      :data="{ dir: 'org_basic_setting' }"
                      accept="image/jpg,image/jpeg,image/gif,image/png"
                  >
                    <div v-if="!fileList.length">
                      <plus-outlined></plus-outlined>
                      <div>上传</div>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item name="is_suggest">
                  <template #label>
                    <span style="margin-right: 5px">推荐展示</span>
                    <a-tooltip>
                      <template #title>推荐的企业会在业户PC端进行展示</template>
                      <span><QuestionCircleOutlined/></span>
                    </a-tooltip>
                  </template>
                  <a-select
                      v-model:value="formState.is_suggest"
                      :options="isSuggestList"
                      placeholder="请选择"
                  ></a-select>
                </a-form-item>
              </a-col>
              <a-col :span="$store.getters.isMobile ? 24 : 8">
                <a-form-item label="官网地址" name="website_link">
                  <a-input
                      placeholder="请填写"
                      v-model:value="formState.website_link"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="$store.getters.isMobile ? 24 : 24">
                <a-form-item label="企业简介" name="company_desc">
                  <vue-ueditor-wrap
                      v-if="visible"
                      v-model="formState.company_desc"
                      :config="ueditorEditorConfig"
                      editor-id="editor-demo-01"
                  ></vue-ueditor-wrap>
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
      <div class="drawer-footer">
        <a-button class="mr-10" @click.prevent="cancel">取消</a-button>
        <a-button type="primary" html-type="submit">保存</a-button>
      </div>
    </a-form>

    <!-- 添加标签 -->
    <TagAdd
        @cancel="addTagClose"
        @success="addTagSuccess"
        :visible="addTagVisible"
        :title="TAG_CONFIG[addTagType].title"
        :requestUrl="TAG_CONFIG[addTagType].requestUrl"
    />

    <!-- 添加联系人、业户联系人 -->
    <HouseholdEdit
        :visible="addContactVisible"
        @onCancel="addContactCancel"
        @success="addContactOk"
        :ownerId="ownerId"
    />

    <!-- 身份证读卡器 -->
    <IDCardReader
        :visible="IDCardReaderVisible"
        @onClose="closeIDCardReader"
        @confirm="confirmIDCardReader"
        @onConnect="onReaderConnect"
    />
    <!--  选择弹窗  -->
    <CustomerSelectModal :visible="customerVisible" @close="customerVisible=false"
                         @select="selectCustomer"/>


    <!-- 选择品牌 -->
    <SelectBrandModal
        :visible="visibleSelectBrand"
        :brandId="brandData?.id"
        @costConfirm="costConfirm"
        @close="visibleSelectBrand = false"
    />

    <!-- 选择招商跟进人 -->
    <ChooseOrgMember
        :visible="chooseMemberVisible"
        :deptDisabled="true"
        :uMax="1"
        :uids="selectedUids"
        setUids="check"
        :getDetail="true"
        :checkedList="checkIdList"
        @request="$utils.commonRequest"
        @close="closeChooseMemberModal"
        @success="handleMemberSelect"
    />

  </div>
</template>
<script>
import {defineComponent, reactive, ref, computed, watch, toRefs} from "vue";
import request from "@/common/utils/request";
import {PlusOutlined, QuestionCircleOutlined, DiffFilled} from "@ant-design/icons-vue";
import moment from "moment";
import {message, Tooltip} from "ant-design-vue";
import TagAdd from "@/components/Tag/add.vue";
import {BLCOMMON, ChooseOrgMember} from "bl-common-vue3";
import HouseholdEdit from "../../HouseholdManagement/modules/HouseholdEdit.vue";
import store from "@/store";
import {ChooseHousingResources, TextTip} from "bl-common-vue3";
import utils from "@/common/utils/utils";
import {IDCardReader} from "bl-common-vue3";
import {VueUeditorWrap} from "vue-ueditor-wrap";
import CustomerSelectModal from "./CustomerSelectModal.vue"
import SelectBrandModal from "@/views/village/BusinessManage/modules/SelectBrandModal.vue"

export default defineComponent({
  name: "NewTenantsAdded",
  components: {
    PlusOutlined,
    VNodes: (_, {attrs}) => {
      return attrs.vnodes;
    },
    TagAdd,
    Tooltip,
    QuestionCircleOutlined,
    HouseholdEdit,
    ChooseHousingResources,
    TextTip,
    IDCardReader,
    VueUeditorWrap,
    CustomerSelectModal,
    DiffFilled,
    SelectBrandModal,
    ChooseOrgMember,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
    type: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, context) {
    const config = computed(() => store.getters.basicConfig);
    // const tag_info = ref([]);
    console.log(
        "store.getters.orgInfo.village_type===>",
        store.getters.orgInfo.village_type
    );
    const formState = reactive({
      name: "",
      contact_id: null,
      contact_notice_id: null,
      // certificate_number: "",
      industry: undefined,
      // tel: "",
      email: "",
      tenant_no: "",
      type: props.type || 0,
      tag_info: [],
      // diy_field: "",
      contact_sign_id: null,
      approval_contact_id: null, //审批联系人
      third_id: undefined,
      team_user_id: undefined,

      invoice_info: {
        bank: "",
        account: "",
        tel: "",
        taxpayerIdNumber: "",
        type: undefined,
        invoice_type: undefined,
        template_id: null,
        address: "",
      },
      business_info: {
        unifiedSocialCreditCode: "",
        taxpayerIdNumber: "",
        registrationNumber: "",
        organizationCode: "",
        legalPerson: "",
        birthCountry: "",
        registeredCapital: "",
        operatingState: "",
        business_info_founding_time: "",
        companyType: "",
        staffSize: "",
        business_info_business_term: "",
        registrationAuthority: "",
        approvalTime: "",
        englishName: "",
        district: "",
        industry: "",
        address: "",
        businessScope: "",
        actualCapital: "", // 实缴资本
        nationalTaxNumber: "", // 国税编号
        localTaxNumber: "", // 地税编号
      },

      contact_data: {
        name: "",
        phone: "",
        type: null,
        idcard_type: "idcard",
        idcard: "",
        email: "",
      },
      logo: "", // 企业logo
      is_suggest: 0, // 推荐展示
      website_link: "", // 官网地址
      company_desc: "", // 企业简介
      is_archive: 0, // 是否归档

      brand_id: undefined //品牌id
    });
    const state = reactive({
      typeList: [], //身份类型下拉选择
      idTypeList: ID_TYPE_OPTIONS, //证件类型下拉选择
      tabList: tabsHeader,
      activeTab: "basic",
      ueditorEditorConfig: {
        UEDITOR_HOME_URL: utils.staticUeditorEditorPaths, // 访问 UEditor 静态资源的根路径，可参考常见问题1
        serverUrl: request.BASE_URL + "/public/system/uploadUEditor", // 参照场地预约-活动说明
        initialFrameHeight: 350,
        autoHeightEnabled: false,
        enableAutoSave: false,
      },
      statusList: STATUS_OPTIONS,

      IDCardReaderVisible: false,
      readerConnected: false,
      selectData: [],
      selpage: 1,
      selcode: true,
      customerVisible: false,
      currentCustomer: undefined,

      brandData: {},
      visibleSelectBrand: false,
      chooseMemberVisible: false,
      selectedUids: [],
      businessOptions: [],
      checkIdList: {
        department: [], user: [],
      },

    });

    const villageType = computed(() => store.getters.buildingInfo.villageType);

    const isDaShi = computed(
        () => store.getters.basicConfig?.org_extra_config?.is_dashi
    );

    const getTypeList = () => {
      if (state.typeList.length) {
        if (!props.id) {
          formState.contact_data.type = state.typeList[0].value;
        }
        return;
      }
      request.get("/village", "/user/type/list").then((res) => {
        state.typeList = res.typeList.map((item) => {
          return {
            value: item.type,
            label: item.info,
          };
        });
        if (!props.id) {
          formState.contact_data.type = state.typeList[0].value;
        }
      });
    };

    // 行业分类
    const options = ref([]);
    // 行业分类
    const adds = ref(0);
    const Industry = () => {
      let list = [];
      request.get("/org", "/manage/taglib/industry/all").then((res) => {
        if (adds.value == 1) {
          formState.industry = res.list[0].id;
        }
        res.list.forEach((item) => {
          if (item.status == 1) {
            list.push({
              value: item.id,
              label: item.name,
            });
          }
        });
        options.value = list;
      });
    };
    // 添加标签
    const add = ref(0);
    const addTagVisible = ref(false);
    const addTagType = ref("owner");
    const addTag = (type) => {
      addTagType.value = type;
      addTagVisible.value = true;
    };
    const addTagClose = () => {
      addTagVisible.value = false;
      add.value == 0;
    };
    const addTagSuccess = () => {
      addTagClose();
      adds.value = 1;
      if (addTagType.value == "owner") {
        tagList();
      } else {
        Industry();
      }
    };
    const tagOptions = ref([]);
    const tagList = () => {
      let list = [];
      request.get("/org", "/manage/taglib/owner").then((res) => {
        res.list.forEach((item) => {
          if (item.status == 1) {
            list.push({
              value: item.id,
              label: item.name,
            });
          }
        });
        tagOptions.value = list;
      });
    };

    const receipt = ref([]); // 发票类型
    const templateList = ref([]); // 发票模板
    // logo上传
    const fileList = ref([]);
    const getReceiptList = () => {
      if (!receipt.value.length) {
        request.get("/org", "/bill/invoiceListInit").then((res) => {
          receipt.value = res.initData.invoiceType.map((item) => ({
            label: item.name,
            value: item.key,
          }));
        });
      }
      request.get("/org", "/owner/invoiceTemplateList").then((res) => {
        templateList.value = res.list.map((item) => ({
          label: item.name,
          value: item.id,
        }));
      });
    };
    // 表单验证
    const rules = ref({
      name: [
        {
          required: true,
          message: `请填写${props.type ? "供应商" : "业户名称"}`,
          trigger: "blur",
        },
      ],
      contact_data: {
        name: {
          required: true,
          message: `请填写默认联系人姓名`,
          trigger: "blur",
        },
        phone: {
          required: true,
          message: `请填写默认联系人手机号码`,
          trigger: "blur",
        },
        type: {
          required: true,
          message: `请选择默认联系人身份`,
        },
      },
    });
    const formRef = ref();
    // 取消按钮
    const cancel = () => {
      if (window?.microApp?.getData()?.isMainDrawer) {
        window?.microApp?.getData()?.closeDrawer();
      } else {
        context.emit("cancel");
      }
      add.value = 0;
      adds.value = 0;
      formRef.value.resetFields();
    };
    const is_personal = ref(false);
    const personalType = ref(true);
    if (store.getters.orgInfo.village_type == "villageAged") {
      is_personal.value = true;
      personalType.value = false;
    }
    // 保存按钮
    const onSubmit = () => {
      add.value = 0;
      adds.value = 0;
      let params = JSON.parse(JSON.stringify(formState));

      console.log("params", params);
      params.needMsg = true;
      params.is_personal = is_personal.value == false ? 0 : 1;
      params.contact_notice_id = params.contact_notice_id || 0;
      params.contact_sign_id = params.contact_sign_id || 0;
      if (state.currentCustomer) {
        params.customer_id = state.currentCustomer.id
      }
      if (props.id) {
        request.put("/org", "/owner/manage", params).then((res) => {
          message.success(res.msg || "操作成功");
          if (window?.microApp?.getData()?.isMainDrawer) {
            window.microApp.forceDispatch(
                {
                  type: "addtenants",
                  refresh: true,
                },
                () => {
                  window?.microApp?.getData()?.closeDrawer();
                }
            );
          } else {
            context.emit("btnok");
          }
          formRef.value.resetFields();
        });
        return;
      }
      request.post("/org", "/owner/manage", params).then((res) => {
        message.success(res.msg || "操作成功");
        if (window?.microApp?.getData()?.isMainDrawer) {
          window.microApp.forceDispatch(
              {
                type: "addtenants",
                refresh: true,
              },
              () => {
                window?.microApp?.getData()?.closeDrawer();
              }
          );
        } else {
          context.emit("btnok");
        }
        formRef.value.resetFields();
      });
    };

    const finishFailed = ({values, errorFields, outOfDate}) => {
      if (
          errorFields.length === 1 &&
          errorFields[0].name[0] === "roomList" &&
          state.activeTab !== "build"
      ) {
        state.activeTab = "build";
      }
    };
    // 搜索
    const optionsSeach = ref([]);
    const onchange = (value, change) => {
      if (value) {
        getResultChanng(value);
      }
    };

    // 节流
    const getResultChanng = (value, callback) => {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      currentValue = value;
      // 搜素请求
      const searchList = () => {
        request
            .post("/org", "/companyInfo/detail", {keywords: value})
            .then((res) => {
              detail = res.detail;
              formState.business_info = {};
              formState.business_info.organizationCode = detail.orgNumber;
              formState.business_info.legalPerson = detail.legalPersonName;
              formState.business_info.operatingState = detail.regStatus;
              formState.business_info.staffSize = detail.staffNumRange;
              formState.business_info.taxpayerIdNumber = detail.taxNumber;
              formState.business_info.organizationCode = detail.orgNumber;
              formState.business_info.registeredCapital = detail.regCapital;
              formState.business_info.companyType = detail.companyOrgType;
              formState.business_info.unifiedSocialCreditCode = detail.creditCode;
              formState.business_info.registrationAuthority = detail.regInstitute;
              formState.business_info.district = detail.district;
              formState.business_info.businessScope = detail.businessScope;
              formState.invoice_info.taxpayerIdNumber = detail.creditCode;
              formState.business_info.registrationNumber = detail.regNumber;
              formState.business_info.address = detail.regLocation;
              formState.business_info.industry = detail.industry;
              formState.business_info.business_info_founding_time =
                  detail.estiblishTimeTxt < moment().format("YYYY-MM-DD")
                      ? detail.estiblishTimeTxt
                      : detail.estiblishTimeTxt == ""
                          ? ""
                          : "";
              formState.business_info.approvalTime = detail.approvedTimeTxt;
              formState.business_info.business_info_business_term =
                  detail.toTimeTxt;
              formState.business_info.actualCapital = detail.actualCapital;
            });
      };
      timeout = setTimeout(searchList, 3000);
    };

    const onSearch = (searchText) => {
      if (!searchText) {
        optionsSeach.value = [];
      } else {
        getResult(searchText, (result) => (optionsSeach.value = result));
      }
    };
    let timeout = null;
    let currentValue = "";
    //  节流
    const getResult = (value, callback) => {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      currentValue = value;
      // 搜素请求
      const searchList = () => {
        request
            .post("/org", "/companyInfo/search", {keywords: value})
            .then((res) => {
              if (currentValue === value) {
                let result = [];
                if (res.list) {
                  result = res.list.map((item) => ({
                    value: item.name,
                    label: item.name,
                  }));
                }
                callback(result);
              }
            });
      };
      timeout = setTimeout(searchList, 800);
    };

    const houseHoldList = reactive({
      list1: [],
      list2: [],
      list3: [],
      keywords1: "",
      keywords2: "",
      keywords3: "",
    });

    const contactTimeout = {
      timeout1: null,
      timeout2: null,
      timeout3: null,
    };

    const searchLists = (type = 0) => {
      console.log(type);
      request
          .get("/village", "/org/user/list/search", {
            keywords: houseHoldList[`keywords${type}`],
            is_all: 1,
            page: 1,
            pageSize: 9999999,
          })
          .then((res) => {
            houseHoldList[`list${type}`] = res.list.map((item) => ({
              value: item.id,
              label: item.name,
              id: item.id,
            }));
          });
    };

    const handleContactsChange = (type, value) => {
      houseHoldList[`keywords${type}`] = value;
      if (contactTimeout[`timeout${type}`]) {
        clearTimeout(contactTimeout[`timeout${type}`]);
        contactTimeout[`timeout${type}`] = null;
      }
      contactTimeout[`timeout${type}`] = setTimeout(() => {
        searchLists(type);
      }, 500);
    };

    const contractName = ref("");
    const showContactTip = computed(
        () =>
            formState.business_info.legalPerson &&
            contractName.value != formState.business_info.legalPerson
    );

    const handleContractSelect = (current) => {
      contractName.value = current.label;
    };

    // 同步工商信息
    const btnNews = () => {
      if (formState.name) {
        postNews();
      }
    };
    // 同步工商信息请求
    const postNews = () => {
      request
          .post("/org", "/companyInfo/detail", {keywords: formState.name})
          .then((res) => {
            detail = res.detail;
            formState.business_info.organizationCode = detail.orgNumber;
            formState.business_info.legalPerson = detail.legalPersonName;
            formState.business_info.operatingState = detail.regStatus;
            formState.business_info.staffSize = detail.staffNumRange;
            formState.business_info.taxpayerIdNumber = detail.taxNumber;
            formState.business_info.organizationCode = detail.orgNumber;
            formState.business_info.registeredCapital = detail.regCapital;
            formState.business_info.companyType = detail.companyOrgType;
            formState.business_info.unifiedSocialCreditCode = detail.creditCode;
            formState.business_info.registrationAuthority = detail.regInstitute;
            formState.business_info.district = detail.district;
            formState.business_info.businessScope = detail.businessScope;
            formState.invoice_info.taxpayerIdNumber = detail.creditCode;
            formState.business_info.registrationNumber = detail.regNumber;
            formState.business_info.address = detail.regLocation;
            formState.business_info.industry = detail.industry;
            formState.business_info.business_info_business_term =
                detail.toTimeTxt;
            formState.business_info.approvalTime = detail.approvedTimeTxt;
            formState.business_info.business_info_founding_time =
                detail.estiblishTimeTxt < moment().format("YYYY-MM-DD")
                    ? detail.estiblishTimeTxt
                    : detail.estiblishTimeTxt == ""
                        ? ""
                        : "";
            formState.business_info.actualCapital = detail?.actualCapital || "";
          });
    };
    //绑定账户信息
    const bindNews = () => {
      request.post("/org", "/owner/manage", {name: props.id}).then((res) => {
        detail = res.detail;
        formState.invoice_info.bank = detail.bank;
        formState.invoice_info.account = detail.account;
        formState.invoice_info.tel = detail.tel;
        formState.invoice_info.taxpayerIdNumber = detail.creditCode;
        formState.invoice_info.type = detail.type;
        formState.invoice_info.address = detail.address;
      });
    };
    // 列表详情
    let detail = {};
    const getDetail = () => {
      if (props.id) {
        request
            .get("/org", "/owner/manage/detail", {id: props.id})
            .then((res) => {
              detail = res.detail;
              detail.business_info_business_term = undefined;
              detail.business_info_founding_time = undefined;
              is_personal.value = detail.is_personal == 1 ? true : false;
              if (store.getters.orgInfo.village_type == "villageAged") {
                is_personal.value = true;
              }
              formState.tag_info = detail.tag_info || [];
              formState.industry = detail.industry_id;
              formState.team_user_id = detail.team_user_id;
              if (formState.team_user_id) {
                console.log(state.businessOptions)
                state.checkIdList.user = [state.businessOptions.find((item => {
                  return item.value == formState.team_user_id
                }))]
                console.log(state.checkIdList)
              }

              if (detail.logo) {
                fileList.value = [
                  {
                    uid: "1",
                    name: detail.logo,
                    status: "done",
                    url: detail.logo,
                  },
                ];
              }
              request
                  .get("/village", "/org/user/list/search", {
                    is_all: 1,
                    page: 1,
                    pageSize: 9999999,
                  })
                  .then((res) => {
                    houseHoldList[`list1`] = res.list.map((item) => ({
                      value: item.id,
                      label: item.name,
                      id: item.id,
                    }));
                    houseHoldList[`list2`] = res.list.map((item) => ({
                      value: item.id,
                      label: item.name,
                      id: item.id,
                    }));
                    houseHoldList[`list3`] = res.list.map((item) => ({
                      value: item.id,
                      label: item.name,
                      id: item.id,
                    }));
                    setModelRef(detail);
                    if (detail.brand_id) {
                      state.brandData = {
                        brand_name: detail.brand_name,
                        id: detail.brand_id
                      }
                    }

                    contractName.value = detail.contact_name || "";
                  });
            });
        rules.value.contact_id = [{required: true}];
        rules.value.approval_contact_id = [{required: false}];
      } else {
        initIsPersonal();
        delete rules.value.contact_id;
        delete rules.value.approval_contact_id;
      }
    };
    const initIsPersonal = () => {
      const buildingInfo = store.getters.buildingInfo;
      if (buildingInfo && buildingInfo.villageType) {
        if (
            ["apartment", "village", "villageAged"].includes(
                buildingInfo.villageType
            )
        ) {
          is_personal.value = true;
        }
      }
    };
    const setModelRef = (state) => {
      for (let key in state) {
        if (state[key]) {
          formState[key] = state[key];
        }
      }
    };
    watch(
        () => is_personal.value,
        (val) => {
          personalType.value = !val;
          if (val) {
            if (villageType.value === "village") {
              // 是小区
              state.tabList = tabsHeader.filter((item) => item.key !== "other");
            } else {
              // 不是小区
              state.tabList = tabsHeader.filter(
                  (item) => !["build", "other"].includes(item.key)
              );
            }
          } else {
            if (villageType.value === "village") {
              // 是小区
              state.tabList = tabsHeader;
            } else {
              // 不是小区
              state.tabList = tabsHeader.filter((item) => item.key !== "build");
            }
          }
        },
        {deep: true, immediate: true}
    );

    const getselect = () => {
      request
          .get("/work_visitor", "/dashi/department", {
            page: state.selpage,
            pageSize: 500,
          })
          .then((res) => {
            let list = [];
            state.selcode = res.result.code == 0 ? true : false;

            if (state.selcode) {
              list = res.result.data.datalist.map((item) => ({
                value: item.dptNo,
                label: item.dptName,
              }));

              if (state.selpage == 1) {
                state.selectData = list;
              } else {
                state.selectData = [...state.selectData, ...list];
              }
            }
          });
    };

    const handlePopupScroll = (e) => {
      const {target} = e;
      const {scrollTop, scrollHeight, clientHeight} = target;

      if (scrollTop + clientHeight == scrollHeight) {
        // 已经到达底部，触发分页逻辑
        // todo 这里就可以触发加载下一页请求  具体函数根据当前业务需求来定
        if (state.selcode) {
          state.selpage++;
          getselect();
        }
      }
    };
    const getBusinessList = () => {
      // 获取招商人员列表
      request.get("/org", "/owner/landlord/getTeamUserList", {}).then(res => {
        console.log(res)
        state.businessOptions = res.userArr.map(item => {
          return {
            label: item.realname,
            value: item.uid,
            ...item
          }
        })
        state.selectedUids = res.userArr.map(item => {
          return item.uid
        })
      })
    }

    const into = () => {
      state.selpage = 1;
      Industry();
      tagList();
      getDetail();
      getReceiptList();
      getTypeList();
      if (isDaShi.value) {
        getselect();
      }
      getBusinessList()
    };
    into();

    const title = computed(() => {
      return props.id ? `编辑业户` : `添加业户`;
    });

    const addContactVisible = ref(false);

    const addContactCancel = () => {
      addContactVisible.value = false;
    };

    const addContactOk = () => {
      contactsInput.value = "";
      searchLists();
      addContactCancel();
    };

    const ownerId = ref(0);
    const addContact = () => {
      ownerId.value = detail.id;
      addContactVisible.value = true;
    };

    const handleUploadChange = (info) => {
      let resFileList = [...info.fileList];
      if (resFileList.length) {
        resFileList = resFileList.slice(-1);
        resFileList = resFileList.map((file) => {
          if (file.response) {
            if (file.response.code == 1000) {
              file.url = file.response.data.fileUrl;
              formState.logo = file.url;
            } else {
              message.warning(file.response.msg);
            }
          }
          return file;
        });
      } else {
        formState.logo = "";
      }
      fileList.value = resFileList;
    };

    //永久按钮
    const permanentTimeClick = () => {
      formState.business_info.business_info_business_term = "2099-12-31";
    };

    const showIDCardReader = () => {
      state.IDCardReaderVisible = true;
    };

    const closeIDCardReader = () => {
      state.IDCardReaderVisible = false;
    };

    const confirmIDCardReader = (cardInfo) => {
      console.log(cardInfo);
      formState.contact_data.name = cardInfo.partyName;
      formState.contact_data.idcard_type =
          cardInfo.certType == 1
              ? "idcard"
              : cardInfo.certType == 50
                  ? "passport"
                  : "gangaotai";
      formState.contact_data.idcard = cardInfo.certNumber;
      state.IDCardReaderVisible = false;
    };

    const onReaderConnect = (connected) => {
      state.readerConnected = connected;
    };

    const filterOption = (input, option) => {
      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };

    const importCustom = () => {
      state.customerVisible = true;

    }
    const selectCustomer = (value) => {
      state.currentCustomer = value
      formState.name = is_personal.value ? state.currentCustomer.name : state.currentCustomer?.company || state.currentCustomer.name
      formState.contact_data.name = state.currentCustomer.name
      formState.contact_data.phone = state.currentCustomer.tel
      formState.industry = state.currentCustomer?.industry
      state.customerVisible = false;
    }

    const isCategoryEdit = computed(() => {
      return BLCOMMON.utils.getBtnPermission([
        "customerBrandCategory",
        "curd",
        "list",
      ]);
    });

    // 选择品牌
    const selectBrandClick = () => {
      if (!isCategoryEdit.value) {
        message.warn('暂无权限')
        return
      }
      state.visibleSelectBrand = true
    }


    const costConfirm = (data) => {
      if (data.id) {
        state.brandData = data
        formState.brand_id = data.id
      } else {
        formState.brand_id = undefined
        state.brandData = {}

      }
      state.visibleSelectBrand = false
    }

    // 关闭选择成员弹窗
    const closeChooseMemberModal = () => {
      state.chooseMemberVisible = false;
    };

    // 成员选中
    const handleMemberSelect = (data) => {
      state.checkIdList = data
      console.log(state.checkIdList)
      formState.team_user_id = data.user[0].uid
      closeChooseMemberModal();
    };

    const chooseBusinessFollow = () => {
      state.chooseMemberVisible = true
    }


    return {
      ...toRefs(state),
      labelCol: {span: 2},
      formState,
      options,
      cancel,
      receipt,
      templateList,
      onSubmit,
      rules,
      formRef,
      title,
      optionsSeach,
      isDaShi,
      onSearch,
      btnNews,
      bindNews,
      houseHoldList,
      handleContactsChange,
      onchange,
      tagOptions,
      addTag,
      personalType,
      is_personal,

      addContactVisible,
      addContactOk,
      addContactCancel,
      addContact,
      TAG_CONFIG,
      addTagVisible,
      addTagType,
      addTagClose,
      addTagSuccess,
      ownerId,
      handleContractSelect,
      showContactTip,
      handleUploadChange,
      fileList,
      isSuggestList,
      permanentTimeClick,
      showIDCardReader,
      closeIDCardReader,
      confirmIDCardReader,
      onReaderConnect,
      finishFailed,
      getselect,
      handlePopupScroll,
      filterOption,
      into,
      importCustom,
      selectCustomer,

      selectBrandClick,

      costConfirm,
      closeChooseMemberModal,
      handleMemberSelect,
      chooseBusinessFollow,

    };
  },
});

const TAG_CONFIG = {
  industry: {
    title: "行业分类",
    requestUrl: {
      color: "/manage/taglib/industry/color",
      save: "/manage/taglib/industry",
      detail: "/manage/taglib/industry/get",
    },
  },
  owner: {
    title: "业户标签",
    requestUrl: {
      color: "/manage/taglib/owner/color",
      save: "/manage/taglib/owner",
      detail: "/manage/taglib/owner/get",
    },
  },
};

const ID_TYPE_OPTIONS = [
  {
    value: "idcard",
    label: "身份证",
  },
  {
    value: "gangaotai",
    label: " 港澳台",
  },
  {
    value: "passport",
    label: "护照",
  },
];

const tabsHeader = [
  {
    key: "basic",
    text: "基本信息",
  },
  {
    key: "other",
    text: "其他信息",
  }
];

const isSuggestList = [
  {
    label: "推荐",
    value: 1,
  },
  {
    label: "不推荐",
    value: 0,
  },
];
const STATUS_OPTIONS = [
  {
    value: 0,
    label: "否",
  },
  {
    value: 1,
    label: "是",
  },
];
</script>
<style lang="less" scoped>
:deep(.ant-tabs-bar) {
  border-bottom: none !important;
  margin-bottom: 1px;
}

/*:deep(.ant-tabs-tab) {
  padding: 18px;
}*/
:deep(.ant-form-item-label > label) {
  width: 100% !important;
}

.status-box {
  display: flex;
}

.status-item {
  padding: 5px 26px;
  border: 1px solid #d9d9d9;
  cursor: pointer;

  &:last-child {
    border-left: none;
  }
}

.active {
  background-color: @primary-color;
  color: #fff;
}

:deep(.ant-input-wrapper .ant-input-group-addon) {
  padding: 0;
}
</style>